<template>
  <div style="width: 100%;height: 100%;padding: 20px">
    <el-form ref="form" :model="marryOtherImage" :rules="rules" size="small" label-width="80px">
      <div class="marry_info">
        <p style="color: #02a3c7;margin: 0">恋人信息</p>
        <div style="height: 1px;background: #c0c0c0;margin: 3px 0 20px 0;"></div>
        <el-form-item label="恋人：" prop="loversId">
          <el-select style="width: 40%" v-model="marryOtherImage.loversId" filterable placeholder="请选择恋人"
                     @change="getMarryOtherImage">
            <el-option
              v-for="item in marryLoversList"
              :key="item.id"
              :label="item | filterMarryLovers"
              :value="item.id">
              <span>{{ item.bridegroomName }}</span>
              <svg-icon icon-class="lovers"/>
              <span>{{ item.brideName }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="image_002">
        <p style="color: #02a3c7;margin: 0">小程序封面照片</p>
        <div style="height: 1px;background: #c0c0c0;margin: 3px 0 20px 0;"></div>
        <div>
          <el-form prop="image002">
            <single-upload v-model="marryOtherImage.image002.imageUrl" :isShowTip="false"></single-upload>
          </el-form>
        </div>
      </div>
      <div class="image_003">
        <p style="color: #02a3c7;margin: 10px 0 0 0">小程序首页海报照片</p>
        <div style="height: 1px;background: #c0c0c0;margin: 3px 0 20px 0;"></div>
        <div>
          <el-form prop="image003">
            <single-upload v-model="marryOtherImage.image003.imageUrl" :isShowTip="false"></single-upload>
          </el-form>
        </div>
      </div>
      <div class="image_004">
        <p style="color: #02a3c7;margin: 10px 0 0 0">小程序分享照片</p>
        <div style="height: 1px;background: #c0c0c0;margin: 3px 0 20px 0;"></div>
        <div>
          <el-form prop="image004">
            <single-upload v-model="marryOtherImage.image004.imageUrl" :isShowTip="false"></single-upload>
          </el-form>
        </div>
      </div>
      <div class="footer_info">
        <el-form-item style="text-align: center">
          <el-button style="width: 200px;font-size: 16px;font-weight: bold;letter-spacing: 5px;" size="medium"
                     type="primary" :loading="btnLoading" v-hasPermi="['marry:marryImage:submit']"
                     @click="submitForm()">提 交
          </el-button>
        </el-form-item>
      </div>
    </el-form>

  </div>
</template>

<script>
import {listMarryOtherImage, submitMarryOtherImage} from "@/api/marry/marryOtherImage";
import {listMarryLovers} from "@/api/marry/marryLovers";

export default {
  name: "MarryOtherImage",
  data() {
    return {
      //其他照片信息
      marryOtherImage: {},
      //恋人对象列表
      marryLoversList: [],
      //提交加载状态
      btnLoading: false,
      // 表单校验
      rules: {
        loversId: [{
          required: true,
          message: '恋人对象不能为空',
          trigger: 'change'
        }],
        image002:
          [{
            required: true,
            message: '小程序封面图片不能为空',
            trigger: 'change'
          }],
        image003:
          [{
            required: true,
            message: '小程序首页海报图片不能为空',
            trigger: 'change'
          }],
        image004:
          [{
            required: true,
            message: '小程序分享图片不能为空',
            trigger: 'change'
          }],
      }
    }
  },
  created() {
    this.getMarryLoversList();
    this.getMarryOtherImage();
  },
  methods: {
    /** 查询婚礼邀请信息 */
    getMarryOtherImage() {
      let queryParams = {};
      if (this.marryOtherImage.loversId) queryParams.loversId = this.marryOtherImage.loversId;
      this.resetMarryOtherImage();
      listMarryOtherImage(queryParams).then(response => {
        this.marryOtherImage = response.data;
      })
    },
    /** 查询恋人对象列表 */
    getMarryLoversList() {
      listMarryLovers().then(response => {
        this.marryLoversList = response.rows;
      })
    },
    //重置其他照片对象
    resetMarryOtherImage() {
      this.marryOtherImage = {
        id: null,
        image002: {},
        image003: {},
        image004: {},
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          let _pm = {};
          if (this.marryOtherImage.image002.imageUrl) {
            this.marryOtherImage.image002.loversId = this.marryOtherImage.loversId;
            _pm.image002 = this.marryOtherImage.image002;
          }
          if (this.marryOtherImage.image003.imageUrl) {
            this.marryOtherImage.image003.loversId = this.marryOtherImage.loversId;
            _pm.image003 = this.marryOtherImage.image003;
          }
          if (this.marryOtherImage.image004.imageUrl) {
            this.marryOtherImage.image004.loversId = this.marryOtherImage.loversId;
            _pm.image004 = this.marryOtherImage.image004;
          }
          this.btnLoading = true;
          submitMarryOtherImage(_pm).then(response => {
            this.$modal.msgSuccess("提交成功");
            this.btnLoading = false;
            this.getMarryOtherImage();
          });
        }
      });
    },
  },
  filters: {
    //格式化恋人显示
    filterMarryLovers(item) {
      return item.bridegroomName + ' & ' + item.brideName;
    }
  }
}
</script>
<style scoped>
.dialog_map >>> .el-dialog__body {
  padding: 10px;
}
</style>
